<script setup>
import { Plus } from '@element-plus/icons-vue';
import UserHeader from '@/components/UserHeader.vue';
import { computed, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getMomentListService } from '@/api/moment';
import { useUserStore } from '@/stores';
const userStore = useUserStore();
const user= userStore.user;
console.log('user', user);
const previewUrlBlobList = ref([]);
const fileRawList = ref([]);
const imageList = ref([]);
const maxImgCount = 2; // 最大图片数量
const limitSize = ref(maxImgCount);// 剩余图片数量,赋值给el-upload组件的limit属性
const deleteImage = (index) => {
  console.log('删除了第', index, '张图片');
  console.log('删除前', imageList.value)
  URL.revokeObjectURL(previewUrlBlobList.value[index]);
  previewUrlBlobList.value.splice(index, 1)
  imageList.value.splice(index, 1)
  fileRawList.value.splice(index, 1)
  console.log('删除后', imageList.value)
  // 手动重置el-upload组件的内部状态
  uploadRef.value?.clearFiles()
  limitSize.value = maxImgCount - imageList.value.length
}

// 添加uploadRef引用
const uploadRef = ref(null)

const handlePreview = (file) => {
  console.log('文件', file);
  // 释放旧的URL（如果存在）
  // if (previewUrlBlob.value) {
  //   URL.revokeObjectURL(previewUrlBlob.value);
  // }
  fileRawList.value.push(file.raw)
  // // 生成临时预览URL
  const blob = URL.createObjectURL(file.raw)
  previewUrlBlobList.value.push(blob)
  imageList.value.push(blob)
  console.log('加载了本地图片链接coverImageUrl', blob);
}

const alertImageUpload = (files, uploadFiles) => {
  ElMessage.warning(`最多上传${maxImgCount}张图片,你还能再上传 ${maxImgCount - imageList.value.length} 张`)
}

const momentList = ref([]);
const showImageUpload = ref(false);
const params = ref({
  title: '',
  content: '',
  imageUrls: []
})
const toggleImgUpload = async () => {
  if (showImageUpload.value && imageList.value.length > 0) {
    try {
      await ElMessageBox.confirm(
        '图片上传关闭将清除所有已添加图片，请确认',
        '图片上传',
        {
          confirmButtonText: '清除图片',
          cancelButtonText: '点错了~',
          type: 'warning',
          center: true,
        }
      )
      // 用户确认清除图片
      previewUrlBlobList.value.forEach(url => URL.revokeObjectURL(url))
      imageList.value = []
      previewUrlBlobList.value = []
      fileRawList.value = []
      uploadRef.value?.clearFiles()
    } catch {
      // 用户取消操作，不做任何处理
      return
    }
  }
  showImageUpload.value = !showImageUpload.value
}
const handleInput = (e) => {
  params.value.content = e.target.innerText
  console.log('输入框内容', params.value.content);
}
const handlePaste = (e) => {
  e.preventDefault()
  const text = e.clipboardData.getData('text/plain')
  // document.execCommand('insertText', false, text)
  params.value.content += text
  // console.log('粘贴内容', params.value.content);
  // 使用现代API替代execCommand
  const selection = window.getSelection()
  if (selection && selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    range.deleteContents()
    range.insertNode(document.createTextNode(text))
    selection.removeAllRanges()
    selection.addRange(range)
  }
}

const imageUrls = ref([
  'https://img1.baidu.com/it/u=3745588933,3274615543&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img2.baidu.com/it/u=2949233657,3941751934&fm=253&fmt=auto&app=120&f=JPEG?w=666&h=500',
  'https://img2.baidu.com/it/u=2949233657,3941751934&fm=253&fmt=auto&app=120&f=JPEG?w=666&h=500',
  'https://img2.baidu.com/it/u=2949233657,3941751934&fm=253&fmt=auto&app=120&f=JPEG?w=666&h=500',
  'https://img2.baidu.com/it/u=2949233657,3941751934&fm=253&fmt=auto&app=120&f=JPEG?w=666&h=500',
  'https://img2.baidu.com/it/u=2949233657,3941751934&fm=253&fmt=auto&app=120&f=JPEG?w=666&h=500',
  'https://img2.baidu.com/it/u=2949233657,3941751934&fm=253&fmt=auto&app=120&f=JPEG?w=666&h=500',
  'https://img2.baidu.com/it/u=2949233657,3941751934&fm=253&fmt=auto&app=120&f=JPEG?w=666&h=500',
  'https://img1.baidu.com/it/u=3520828764,1390922412&fm=253&fmt=auto&app=120&f=JPEG?w=555&h=371',
  'https://img1.baidu.com/it/u=2055044711,3391887477&fm=253&fmt=auto?w=640&h=427',
  'https://img0.baidu.com/it/u=2644394854,3518864664&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img0.baidu.com/it/u=2644394854,3518864664&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img0.baidu.com/it/u=2644394854,3518864664&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img0.baidu.com/it/u=2644394854,3518864664&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img0.baidu.com/it/u=2644394854,3518864664&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img0.baidu.com/it/u=2644394854,3518864664&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500'

])

const url = ref('https://img2.baidu.com/it/u=3405157298,194987210&fm=253&fmt=auto?w=1200&h=800')
const content = ref('  这是一个动态内容习近平总书记强调，要不断创\n新理论武装的方式方法，坚持经常性教育和集中性教育相结合、理论武装和实践运用相结合、强党性和增本领相结合。交通管理学院第二学生党支部创新理论学习方式方法，探索出具有公安院校特色的学生党员“读经典、讲经典、践经典”的三步理论学习模式。第一步，聘请马克思主义学院知名专家深入学生群体解读马克思主义经典著作，定期召开青年党员读书会。学生们通过原原本本学原文、真真切切悟原理，不断提升理论水平。第二步，鼓励学生党员积极参加“党员讲党课”“预备警官讲思政”活动。在这一过程中，学生党员角色转变，从学习者变为习近平新时代中国特色社会主义思想的传播者。第三步，党支部与公安一线党支部结对学习。利用学生实习机会，聘请实习地公安优秀党员干部担任“警师”，带领学生感受党的创新理论在公安工作中的实践力量，体会习近平新时代中国特色社会主义思想的精神伟力，从维护国家安全和社会稳定的实际成效中感悟共产党人的初心和使命。用好三个教学课堂，强化政治担当习近平总书记强调，要加强党性锻炼，不断提高政治觉悟和政治能力，把对党忠诚、为党分忧、为党尽职、为民造福作为根本政治担当，永葆共产党人政治本色。交通管理学院第二学生党支部立足公安院校特色，深挖思政育人资源，通过“三个课堂”构建特色教育体系，推进党建与思政教育深度融合，不断提升师生政治觉悟、增强政治能力、强化政治担当。一是提升干部教师教育教学能力，巩固完善思政“第一课堂”。一方面，党支部书记每季度给全体党员讲授专题党课，扎实推进人民公安发展史的教学研究，努力实现党课内容创新。另一方面，党支部书记由辅导员担任，同步落实《形势与政策》课程教学，用习近平新时代中国特色社会主义思想的生动实践，引导学生增强“四个意识”、坚定“四个自信”、做到“两个维护”。教师党员深化课程')
const showMore = ref(false)
const pageParams = ref({
  page: 1,
  pageSize: 10,
})
const getMomentListData = async () => {
  const { data } = await getMomentListService(pageParams.value)
  console.log(data);
  momentList.value = data.records
}
getMomentListData()

</script>

<template>

  <UserHeader></UserHeader>
  <div class="bg"></div>
  <div class="bgc"></div>
  <div class="bili-dyn-home--member">
    <main class="center">
      <section class="top_section">
        <div class="bili-dyn-publishing">

          <!-- 标题 -->
          <div class="bili-dyn-publishing__title">
            <input v-model.trim="params.title" maxlength="20" placeholder="好的标题更容易获得支持，选填20字"
              class="bili-dyn-publishing__title__input">

            <div class="bili-dyn-publishing__title__helper" v-show="params.title !== ''">

              <div class="bili-dyn-publishing__title__clear" @click="params.title = ''">

                <div class="bili-dyn-publishing__title__close">

                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 8"
                    width="8" height="8" style="width: 8px; height: 8px;">
                    <path
                      d="M1.28895 1.2898733333333334C1.5818566666666654 0.9969799999999991 2.0567133333333345 0.9969799999999991 2.349603333333332 1.2898733333333334L3.9994666666666667 2.939749999999999L5.6498333333333335 1.2893266666666667C5.942750000000002 0.9964333333333324 6.4176499999999965 0.9964333333333324 6.71048333333333 1.2893266666666667C7.00351666666667 1.5822166666666677 7.00351666666667 2.0570899999999996 6.71048333333333 2.3499799999999986L5.060116666666667 4.0004L6.710050000000003 5.650416666666669C7.003083333333336 5.943250000000003 7.003083333333336 6.418149999999997 6.710050000000003 6.7109833333333295C6.417216666666663 7.0039 5.942316666666663 7.0039 5.6494 6.7109833333333295L3.9994666666666667 5.06105L2.3500533333333333 6.710533333333332C2.057143333333334 7.0033666666666665 1.5822900000000004 7.0033666666666665 1.28938 6.710533333333332C0.996489999999999 6.4175 0.996489999999999 5.942716666666669 1.28938 5.649883333333336L2.938816666666666 4.0004L1.28895 2.3505266666666653C0.9960566666666673 2.0576366666666663 0.9960566666666673 1.5827633333333344 1.28895 1.2898733333333334z"
                      fill="currentColor">
                    </path>
                  </svg>
                </div>
              </div>
              <div class="bili-dyn-publishing__title__indicator">{{ params.title.length }}</div>
            </div>
          </div>

          <!-- 输入 -->
          <div class="bili-dyn-publishing__input">
            <div class="bili-rich-textarea" style="max-height: 180px;">
              <div class="bili-rich-textarea__inner" contenteditable="true" @input="handleInput" @paste="handlePaste"
                placeholder="有什么想和大家分享的？" style="font-size: 15px; line-height: 
                24px; min-height: 24px;">
              </div>
            </div>

          </div>
          <!-- 隐藏的图片区域 -->
          <div class="bili-dyn-publishing__image-upload" v-show="showImageUpload">
            <div class="bili-pics-uploader">
              <div class="bili-pics-uploader__content">

                <!-- 显示每一张缩略图 -->
                <!--   <div class="bili-pics-uploader__item success" draggable="false" style="">
                  <!~~  删除按钮 ~~>
                  <div class="bili-pics-uploader__item__remove"></div>
                  <div class="bili-pics-uploader-item-preview" status="SUCCESS" msg="">
                    <div class="bili-pics-uploader-item-preview__pic"
                      style="background-image: url(https://img2.baidu.com/it/u=2172943014,2682558540&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500);">
                    </div>
                    <div class="bili-pics-uploader-item-preview__progress" style="display: none;">
                      <div class="bili-pics-uploader-item-preview__progress__stage" style="width: 100%;"></div>
                    </div>
                  </div>
                </div>-->
                <div v-for="(item, index) in imageList" :key="index" class="bili-pics-uploader__item success"
                  draggable="false" style="">
                  <!--  删除按钮 -->
                  <div class="bili-pics-uploader__item__remove" @click="deleteImage(index)"></div>
                  <div class="bili-pics-uploader-item-preview" status="SUCCESS" msg="">
                    <div class="bili-pics-uploader-item-preview__pic"
                      :style="{ 'background-image': 'url(' + item + ')' }">
                    </div>
                    <div class="bili-pics-uploader-item-preview__progress" style="display: none;">
                      <div class="bili-pics-uploader-item-preview__progress__stage" style="width: 100%;"></div>
                    </div>
                  </div>
                </div>

                <!-- 添加按钮  -->
                <div class="bili-pics-uploader__add" v-show="imageList.length < 18">
                  <el-upload ref="uploadRef" multiple class="preview_box" :limit="limitSize" accept="image/*"
                    :auto-upload="false" :show-file-list="false" :on-change="handlePreview"
                    :on-exceed="alertImageUpload">
                    <template #trigger>
                      <div class="upload-area">
                        <div class="upload-placeholder">
                          <el-icon :size="30">
                            <Plus />
                          </el-icon>
                        </div>
                      </div>
                    </template>
                  </el-upload>

                </div>
              </div>
            </div>
          </div>

          <!-- 底部工具栏 -->
          <div class="bili-dyn-publishing__control">
            <!-- 左侧工具栏  -->
            <div class="bili-dyn-publishing__tools">
              <!-- 图片按钮 -->
              <div @click="toggleImgUpload" class="bili-dyn-publishing__tools__item pic active">
                <svg style="width: 24px; height: 24px;" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
                  <path
                    d="M8.5 8.47247C7.93252 8.47247 7.4725 8.93249 7.4725 9.49997C7.4725 10.06746 7.93252 10.52745 8.5 10.52745C9.06747 10.52745 9.5275 10.06746 9.5275 9.49997C9.5275 8.93249 9.06747 8.47247 8.5 8.47247zM6.0275 9.49997C6.0275 8.13444 7.13448 7.02746 8.5 7.02746C9.86552 7.02746 10.9725 8.13444 10.9725 9.49997C10.9725 10.86545 9.86552 11.97245 8.5 11.97245C7.13448 11.97245 6.0275 10.86545 6.0275 9.49997z"
                    fill="currentColor">
                  </path>
                  <path
                    d="M12 4.99756C9.48178 4.99756 7.283 5.12566 5.73089 5.25153C4.65221 5.339 3.81611 6.16303 3.72 7.23205C3.60607 8.49931 3.5 10.1705 3.5 11.9976C3.5 13.82465 3.60607 15.4958 3.72 16.7631C3.81611 17.8321 4.65221 18.65615 5.73089 18.7436C7.283 18.8695 9.48178 18.9976 12 18.9976C14.5185 18.9976 16.7174 18.8694 18.2696 18.74355C19.3481 18.6561 20.184 17.8323 20.2801 16.76355C20.394 15.49685 20.5 13.82595 20.5 11.9976C20.5 10.16915 20.394 8.49828 20.2801 7.23156C20.184 6.16281 19.3481 5.33903 18.2696 5.25156C16.7174 5.12569 14.5185 4.99756 12 4.99756zM5.60965 3.75644C7.19232 3.6281 9.43258 3.49756 12 3.49756C14.5677 3.49756 16.8081 3.62812 18.3908 3.75647C20.1881 3.90224 21.6118 5.2923 21.7741 7.09724C21.8909 8.39641 22 10.11355 22 11.9976C22 13.88155 21.8909 15.5987 21.7741 16.8979C21.6118 18.7028 20.1881 20.0929 18.3908 20.23865C16.8081 20.367 14.5677 20.4976 12 20.4976C9.43258 20.4976 7.19232 20.367 5.60965 20.2387C3.81206 20.0929 2.38831 18.7025 2.22603 16.8974C2.10918 15.5977 2 13.8803 2 11.9976C2 10.1148 2.10918 8.39738 2.22603 7.09774C2.38831 5.29263 3.81206 3.90221 5.60965 3.75644z"
                    fill="currentColor">
                  </path>
                  <path
                    d="M15.8624 13.5532C15.4524 13.1431 14.78755 13.1431 14.37745 13.55315L12.3451 15.58555C11.4912 16.43945 10.1065 16.43915 9.25299 15.5847C8.91511 15.2465 8.36696 15.24635 8.02887 15.5844L6.5303 17.08275C6.23739 17.3756 5.76251 17.3756 5.46964 17.0827C5.17676 16.7898 5.17679 16.3149 5.4697 16.022L6.96829 14.52365C7.89238 13.59965 9.39064 13.6001 10.3142 14.5246C10.58205 14.7927 11.0165 14.79285 11.28445 14.5249L13.31675 12.4925C14.31265 11.4966 15.92735 11.49665 16.9232 12.49265L18.5304 14.1001C18.82325 14.393 18.8232 14.86785 18.53025 15.16075C18.23735 15.4536 17.7625 15.4536 17.4696 15.16065L15.8624 13.5532z"
                    fill="currentColor">
                  </path>
                </svg>
              </div>

            </div>

            <!-- 右侧发布按钮 -->
            <div class="bili-dyn-publishing__headquarters">
              <div title="全角字符计数为1半角字符计数为0.5，不足1时记为1"
                :class="['bili-dyn-publishing__hint', { 'heedful': params.content.length > 1000 }]">
                {{ params.content.length > 1000 ? 1000 - params.content.length : params.content.length }}
              </div>
              <div class="bili-dyn-publishing__action launcher">
                发布
              </div>
            </div>


          </div>

        </div>
      </section>
      <section class="moments_list_section">
        <div class="bili-dyn-list">
          <div class="bili-dyn-list__items">
            <!-- 这是每一个动态 -->
            <div class="bili-dyn-list__item" v-for="(item, index) in 4" :key="index">
              <div class="bili-dyn-item">
                <div class="bili-dyn-item__main">
                  <!-- 左上角头像 -->
                  <div class="bili-dyn-item__avatar">
                    <div class="bili-dyn-avatar">
                      <img
                        src="https://img0.baidu.com/it/u=2571858488,88138256&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                        alt="">

                    </div>




                  </div>

                  <!-- 昵称和发布时间 -->
                  <div class="bili-dyn-item__header">
                    <div data-module="title" class="bili-dyn-title">
                      <span class="bili-dyn-title__text  fs-large normal-vip-color">
                        电影最TOP
                      </span>
                    </div>
                    <div class="bili-dyn-item__desc">
                      <div data-module="time" class="bili-dyn-time fs-small bili-ellipsis">
                        27分钟前
                      </div>
                    </div>
                    <div class="bili-dyn-item__more">
                      <div class="bili-dyn-more">
                        <div class="tp bili-dyn-more__btn">
                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M13.7485 5.49841C13.7485 6.46404 12.9657 7.24683 12.0001 7.24683C11.0344 7.24683 10.2516 6.46404 10.2516 5.49841C10.2516 4.53279 11.0344 3.75 12.0001 3.75C12.9657 3.75 13.7485 4.53279 13.7485 5.49841ZM13.7484 18.4982C13.7484 19.4639 12.9656 20.2467 11.9999 20.2467C11.0343 20.2467 10.2515 19.4639 10.2515 18.4982C10.2515 17.5326 11.0343 16.7498 11.9999 16.7498C12.9656 16.7498 13.7484 17.5326 13.7484 18.4982ZM11.9999 13.7487C12.9656 13.7487 13.7484 12.9658 13.7484 12.0002C13.7484 11.0345 12.9656 10.2517 11.9999 10.2517C11.0343 10.2517 10.2515 11.0345 10.2515 12.0002C10.2515 12.9658 11.0343 13.7487 11.9999 13.7487Z"
                              fill="currentColor">
                            </path>
                          </svg>

                          <div class="bili-cascader bili-dyn-more__cascader"
                            style="flex-direction: row-reverse;z-index: 2018;">
                            <div class="bili-cascader__list" style="margin-right: -3px; z-index: 1;">
                              <div class="bili-cascader-options">
                                <div class="bili-cascader-options__item">
                                  <div class="bili-cascader-options__item-custom"><!---->
                                    <div>
                                      <div class="bili-cascader-options__item-label">取消关注</div> <!---->
                                    </div>
                                  </div>
                                </div>
                                <div class="bili-cascader-options__item">
                                  <div class="bili-cascader-options__item-custom">
                                    <div>
                                      <div class="bili-cascader-options__item-label">举报</div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 内容 -->
                  <div class="bili-dyn-item__body">

                    <div class="bili-dyn-content">
                      <div class="bili-dyn-content__orig">
                        <div class="bili-dyn-content__orig__major suit-video-card">

                          <div class="dyn-card-opus" dyn-id="1058235772294922261">
                            <!-- 标题 -->
                            <div data-module="desc" data-orig="0" data-url=""
                              class="dyn-card-opus__title bili-ellipsis">
                              美团吃外卖还可以赚钱？史上最大羊毛！！
                            </div>
                            <!-- 内容 -->
                            <div class="dyn-card-opus__summary jump">
                              <div class="bili-rich-text" style="font-size: 15px;">

                                <div class="bili-rich-text__content"
                                  :class="{ 'folded': !showMore, 'line--6': !showMore }"
                                  :style="{ 'line-height': '25px', 'max-height': showMore ? 'none' : '171px' }">
                                  <span class="multiline_text">
                                    {{ content }}
                                  </span>
                                </div>
                                <div @click="showMore = !showMore" class="bili-rich-text__action">{{ showMore ? '收起' :
                                  '展开' }}
                                </div>

                              </div>
                            </div>
                            <!-- 底部图片 -->
                            <div class="dyn-card-opus__pics">
                              <div class="bili-album">
                                <div class="bili-album__preview grid3">
                                  <div class="bili-album__preview__picture" v-for="(item, index) in 8" :key="index">
                                    <el-image :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                      :preview-src-list="imageUrls" show-progress :initial-index="4" fit="cover">
                                    </el-image>

                                  </div>

                                  <div class="bili-album__preview__picture"
                                    :class="{ 'total-mask': imageUrls.length > 9 }"
                                    :data-total="'+' + (imageUrls.length - 9)">

                                    <!-- <div class="bili-album__preview__picture__img b-img"> -->
                                    <el-image class="imgs" :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                      :preview-src-list="imageUrls" show-progress :initial-index="4" fit="cover">
                                    </el-image>

                                    <!-- </div> -->
                                  </div>

                                </div>

                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>


                  <!-- 底部评论和点赞 -->
                  <div class="bili-dyn-item__footer">
                    <!-- 评论 -->
                    <div class="bili-dyn-item__action">
                      <div data-module="action" data-type="comment" class="bili-dyn-action comment">
                        <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" width="18" height="18">
                          <path
                            d="M1.5625 7.875C1.5625 4.595807499999999 4.220807499999999 1.9375 7.5 1.9375L10.5 1.9375C13.779175 1.9375 16.4375 4.595807499999999 16.4375 7.875C16.4375 11.0504 13.944675 13.6435 10.809275 13.80405C10.097025 14.722974999999998 8.920875 15.880675 7.267095 16.331325C6.9735075 16.4113 6.704762499999999 16.286224999999998 6.55411 16.092325C6.40789 15.904149999999998 6.3561 15.634350000000001 6.4652449999999995 15.383025C6.72879 14.776249999999997 6.776465 14.221025000000001 6.7340175 13.761800000000001C3.8167675 13.387125 1.5625 10.894475 1.5625 7.875zM7.5 2.9375C4.773095 2.9375 2.5625 5.148095 2.5625 7.875C2.5625 10.502575 4.61524 12.651075000000002 7.2041924999999996 12.8038C7.4305875 12.817174999999999 7.619625000000001 12.981200000000001 7.664724999999999 13.203475C7.772575 13.734575000000001 7.8012 14.405425000000001 7.5884275 15.148399999999999C8.748325 14.6682 9.606 13.759825 10.151275 13.016475C10.24445 12.889475 10.392050000000001 12.8138 10.54955 12.812275C13.253575 12.785725 15.4375 10.58535 15.4375 7.875C15.4375 5.148095 13.226899999999999 2.9375 10.5 2.9375L7.5 2.9375z"
                            fill="currentColor">
                          </path>
                        </svg>
                        510
                      </div>
                    </div>
                    <!-- 点赞 -->
                    <div class="bili-dyn-item__action ">
                      <div class="bili-dyn-action like active" data-module="action" data-type="like">
                        <!-- 未点赞的图标 -->
                        <!-- <svg
                          style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" width="18" height="18">
                          <path
                            d="M10.4511 2.2220125C10.218425 2.194885 10.002175 2.2953725 9.884175 2.433395C9.4264 2.9688525 9.321875 3.7501399999999996 8.978575 4.3581725C8.533574999999999 5.146395 8.1198 5.6213375 7.609775000000001 6.068507499999999C7.1751375 6.449565 6.738407499999999 6.697442499999999 6.3125 6.8050575L6.3125 14.854575C6.9198900000000005 14.868174999999999 7.572900000000001 14.876875 8.25 14.876875C9.936425 14.876875 11.367025 14.823325 12.33115 14.773699999999998C13.03235 14.737575 13.646025000000002 14.390075 13.966750000000001 13.81945C14.401900000000001 13.04535 14.9387 11.909650000000001 15.264174999999998 10.571200000000001C15.56665 9.327275 15.704699999999999 8.304325 15.766675 7.582224999999999C15.7988 7.208262500000001 15.50165 6.875019999999999 15.059999999999999 6.875019999999999L11.323274999999999 6.875019999999999C11.156575 6.875019999999999 11.000800000000002 6.791952499999999 10.907975 6.653499999999999C10.783725 6.468192500000001 10.82855 6.2670175 10.9037 6.07485C11.059 5.675084999999999 11.29355 4.9974475 11.382425000000001 4.4018275C11.470875000000001 3.80917 11.450999999999999 3.32219 11.212050000000001 2.86913C10.9571 2.3857825 10.66065 2.2464475 10.4511 2.2220125zM12.034300000000002 5.87502L15.059999999999999 5.87502C16.02035 5.87502 16.850875 6.64489 16.763 7.667825C16.697100000000002 8.435525 16.55155 9.5092 16.235825000000002 10.807500000000001C15.882625 12.259950000000002 15.3035 13.482225 14.838450000000002 14.309474999999999C14.32695 15.2194 13.377475 15.721150000000002 12.38255 15.772375C11.405125 15.822725 9.956949999999999 15.876875000000002 8.25 15.876875000000002C6.5961925 15.876875000000002 5.0846825 15.826025000000001 4.0136674999999995 15.77715C2.8370825 15.723474999999999 1.8519999999999999 14.850000000000001 1.725645 13.654824999999999C1.6404649999999998 12.849274999999999 1.5625 11.80725 1.5625 10.689375C1.5625 9.665175000000001 1.6279400000000002 8.736175 1.7045524999999997 7.998975C1.8351224999999998 6.7427075 2.9137075 5.87502 4.130655 5.87502L5.8125 5.87502C6.072015 5.87502 6.457235 5.7490675 6.9505175 5.316582499999999C7.377705000000001 4.942045 7.7193000000000005 4.5546075 8.107775 3.8665374999999997C8.492075 3.18585 8.605825 2.389785 9.124075 1.783595C9.452975 1.3988800000000001 9.99475 1.162025 10.5669 1.228745C11.16225 1.29816 11.717425 1.683875 12.09655 2.4025825000000003C12.478275 3.1262375000000002 12.474075 3.8618225 12.371500000000001 4.54938C12.302149999999997 5.0139949999999995 12.155425000000001 5.510059999999999 12.034300000000002 5.87502zM5.3125 14.82705L5.3125 6.875019999999999L4.130655 6.875019999999999C3.3792199999999997 6.875019999999999 2.77211 7.400795 2.6991975000000004 8.10235C2.6253525 8.812875 2.5625 9.70665 2.5625 10.689375C2.5625 11.762875 2.6374975 12.768475 2.7200975 13.549700000000001C2.7919925 14.229675 3.3521950000000005 14.74595 4.05924 14.778224999999999C4.4278775 14.795 4.849985 14.812050000000001 5.3125 14.82705z"
                            fill="currentColor">
                          </path>
                        </svg> -->
                        <!-- 已经点赞的图标 -->
                        <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" width="18" height="18">
                          <path
                            d="M15.238949999999999 5.8749875L11.728124999999999 5.8749875C11.903625 5.509125 12.108450000000001 5.0146725 12.179124999999999 4.54079C12.225925 4.227235 12.230549999999997 3.8411524999999997 12.192600000000002 3.4729099999999997C12.155475 3.1126975 12.072274999999998 2.715405 11.909324999999999 2.4065275C11.5572 1.73896 11.07925 1.2830650000000001 10.515075 1.1730275000000001C9.9175 1.056475 9.4 1.3591199999999999 9.086975 1.832795C8.821325 2.2348025 8.71795 2.5693425000000003 8.62185 2.8804925L8.619125 2.8893475C8.526275 3.1897624999999996 8.4337 3.488995 8.19635 3.9093850000000003C7.807925000000001 4.59742 7.489369999999999 4.956485000000001 7.062139999999999 5.331055C6.807695000000001 5.5541375 6.541364999999999 5.6883925 6.3125 5.760025L6.3125 15.85475C6.9202625 15.868200000000002 7.573125 15.876800000000003 8.25 15.876800000000003C10.00675 15.876800000000003 11.4894 15.819474999999999 12.466925 15.767950000000003C13.408750000000001 15.7183 14.305975 15.243900000000002 14.795475 14.385325C15.267499999999998 13.557499999999997 15.871775 12.304749999999999 16.235825000000002 10.807475C16.577575000000003 9.40205 16.719975 8.259725 16.7778 7.4839150000000005C16.846225 6.565215 16.10015 5.8749875 15.238949999999999 5.8749875zM5.3125 15.827525L5.3125 5.8749875L3.9767325000000002 5.8749875C2.8486374999999997 5.8749875 1.8491449999999998 6.6792625 1.7212225 7.843025000000001C1.63766 8.60325 1.5625 9.5917 1.5625 10.6893C1.5625 11.876325000000001 1.6504175 12.977975 1.7415649999999998 13.801975C1.864035 14.909174999999998 2.7766325 15.718875 3.8673275 15.770325C4.28143 15.789874999999999 4.769835 15.810149999999998 5.3125 15.827525z"
                            fill="currentColor">
                          </path>
                        </svg>

                        1690
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


    </main>
  </div>

</template>

<style lang="scss" scoped>
.top_section {
  .bili-dyn-publishing {
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 20px 20px 12px;
    position: relative;
    width: 100%;

    .bili-dyn-publishing__title {
      box-sizing: border-box;
      height: 24px;
      margin-top: 6px;
      padding-right: 48px;
      position: relative;
      width: 100%;

      .bili-dyn-publishing__title__input {
        background: #fff;
        border: none;
        font-size: 15px;
        font-weight: 500;
        height: 24px;
        line-height: 24px;
        outline: none;
        width: 100%;
      }

      .bili-dyn-publishing__title__helper {
        display: flex;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;

        .bili-dyn-publishing__title__clear {
          align-items: center;
          cursor: pointer;
          display: flex;
          height: 100%;
          justify-content: center;
          width: 24px;

          .bili-dyn-publishing__title__close {
            align-items: center;
            background-color: #c9ccd0;
            border-radius: 50%;
            color: #fff;
            display: flex;
            height: 16px;
            justify-content: center;
            width: 16px;
          }
        }

        .bili-dyn-publishing__title__indicator {
          color: #9499a0;
          font-size: 13px;
          line-height: 24px;
          text-align: right;
          width: 24px;
        }
      }
    }

    .bili-dyn-publishing__input {
      margin: 4px 14px 12px 0;
      min-height: 40px;
      padding-right: 4px;
      position: relative;

      .bili-rich-textarea {
        cursor: text;
        height: 100%;
        overflow-y: auto;
        position: relative;
        width: 100%;

        .bili-rich-textarea__inner {
          word-wrap: break-word;
          background-color: #fff;
          box-sizing: border-box;
          color: #18191c;
          font-size: 14px;
          letter-spacing: 1px;
          outline: none;
          padding-right: 5px;
          position: relative;
          vertical-align: baseline;
          white-space: pre-wrap;
          width: 100%;
          word-break: break-all;

          &:empty::before {
            content: attr(placeholder);
            color: #999;
            /* 修改字体颜色 */
            // font-style: italic;
            /* 修改字体样式 */
            font-family: "Microsoft YaHei", sans-serif;
            /* 修改字体 */
            pointer-events: none;
            //   /* 防止干扰点击 */
          }


        }


      }
    }


    .bili-dyn-publishing__image-upload {
      margin-top: 2px;

      .bili-pics-uploader__content {
        display: flex;
        flex-wrap: wrap;

        .bili-pics-uploader__item {
          background-color: #f1f2f3;
          border-radius: 4px;
          cursor: move;
          height: 92px;
          margin-bottom: 8px;
          margin-right: 7px;
          position: relative;
          width: 92px;

          .bili-pics-uploader__item__remove {
            background: url() 50%/cover no-repeat;
            cursor: pointer;
            height: 24px;
            position: absolute;
            right: 2px;
            top: 2px;
            width: 24px;
            z-index: 2;
          }

          .bili-pics-uploader-item-preview {
            height: 100%;
            position: relative;
            width: 100%;

            .bili-pics-uploader-item-preview__pic {
              background-position: 50%;
              background-size: cover;
              border-radius: 4px;
              height: 100%;
              width: 100%;
            }

          }
        }

        .bili-pics-uploader__add {
          border: 2px dashed #e3e5e7;
          border-radius: 4px;
          cursor: pointer;
          height: 92px;
          margin-bottom: 10px;
          position: relative;
          transition: border-color .3s;
          width: 92px;

          &:hover {
            border-color: #80daf6;
          }

          .preview_box {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;

            :deep(.el-upload) {
              width: 100%;
              height: 100%;

              .upload-area {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .upload-placeholder {
                  display: flex;
                  align-items: center;
                  // gap: 10px;
                  justify-content: center;
                  color: #8c939d;
                }


              }
            }




          }

          /* :deep(.el-upload--picture-card) {
            width: 92px;
            height: 92px;
            line-height: 92px;
            margin-right: 8px;
            margin-bottom: 8px;
            background: #f1f2f3;
            border-radius: 4px;

            .el-icon {
              font-size: 24px;
              color: #9499a0;
            }
          }

          :deep(.el-upload-list--picture-card) {
            display: flex;
            flex-wrap: wrap;
            margin: 0;

            .el-upload-list__item {
              width: 92px;
              height: 92px;
              margin: 0 8px 8px 0;
              border-radius: 4px;
            }
          }

          .image-preview {
            position: relative;
            width: 100%;
            height: 100%;

            &:hover .el-upload-list__item-actions {
              opacity: 1;
            }
          }

          .el-upload-list__item-actions {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .6);
            opacity: 0;
            transition: opacity .3s;
          }

          .el-upload-list__item-delete {
            position: absolute;
            right: 2px;
            top: 2px;
            color: #fff;
            cursor: pointer;
          }*/
        }
      }
    }

    .bili-dyn-publishing__control {
      align-items: center;
      display: flex;
      justify-content: space-between;

      // 左侧
      .bili-dyn-publishing__tools {
        align-items: center;
        display: flex;
        position: relative;

        .bili-dyn-publishing__tools__item {
          background-repeat: no-repeat;
          background-size: contain;
          color: #9499a0;
          cursor: pointer;
          height: 24px;
          margin-left: 16px;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          width: 24px;

          &.pic {
            margin-left: 0;
          }
        }
      }

      .bili-dyn-publishing__headquarters {
        align-items: center;
        display: flex;
        justify-content: center;
        margin-left: 20px;

        .bili-dyn-publishing__hint {
          color: #9499a0;
          font-size: 14px;
          margin-right: 25px;
          position: relative;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;

          &.heedful {
            color: #f85a54;
          }
        }

        .bili-dyn-publishing__action {
          align-items: center;
          background: #00aeec;
          border-radius: 6px;
          box-sizing: border-box;
          color: #fff;
          cursor: pointer;
          display: flex;
          font-size: 14px;
          height: 32px;
          justify-content: center;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          width: 70px;

          &.launcher {
            min-width: 70px;
          }
        }
      }
    }
  }
}

.moments_list_section {
  .bili-dyn-list__item {
    margin-bottom: 8px;

    .bili-dyn-item {
      -webkit-font-smoothing: antialiased;
      background-color: #fff;
      border-radius: 6px;
      box-sizing: border-box;
      font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
      font-weight: 400;
      letter-spacing: 0;
      min-width: 556px;
      position: relative;

      .bili-dyn-item__main {
        padding: 0 28px 0 88px;
        position: relative;

        .bili-dyn-item__avatar {
          align-items: center;
          display: flex;
          height: 86.4px;
          justify-content: center;
          left: 0;
          position: absolute;
          top: 0;
          width: 86.4px;
          cursor: pointer;

          .bili-dyn-avatar {
            width: 48px;
            height: 48px;

            img {
              object-fit: cover;
              border-radius: 50%;

            }
          }


        }

        .bili-dyn-item__header {
          height: 62px;
          padding-top: 16px;

          .bili-dyn-title {
            align-items: center;
            display: flex;
            height: 22px;
            margin: 1px 0 2px;
            width: -moz-max-content;
            width: -webkit-max-content;
            width: max-content;


            .bili-dyn-title__text {
              color: #18191c;
              cursor: pointer;
              font-weight: 600;
              line-height: 22px;
              transition: all .2s;

              &.normal-vip-color {
                color: #f69;
              }
            }

            .fs-large {
              font-size: 17px;
              line-height: 32px;
            }


          }

          .bili-dyn-item__desc {
            align-items: center;
            display: flex;
            padding-right: 120px;
            padding-top: 4px;



            .bili-dyn-time {
              -webkit-line-clamp: 1;
              color: #9499a0;
              cursor: pointer;
              line-height: 18px;
              transition: color .3s ease;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
              width: -moz-fit-content;
              width: -webkit-fit-content;
              width: fit-content;
            }

            .bili-ellipsis {
              -webkit-box-orient: vertical;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
            }

            .fs-small {
              font-size: 13px;
              line-height: 18px;
            }
          }

          .bili-dyn-item__more {
            position: absolute;
            right: 16px;
            top: 30px;

            .bili-dyn-more {
              border-radius: 4px;
              height: 24px;
              width: 24px;

              .bili-dyn-more__btn {
                cursor: pointer;
                position: absolute;
                right: 0;
                top: 0;

                .bili-cascader {
                  display: flex;
                  position: absolute;
                }

                .bili-dyn-more__cascader {
                  right: 0;
                  top: 32px;

                  .bili-cascader__list {
                    position: relative;

                    .bili-cascader-options {
                      background: #fff;
                      border: 1px solid #e3e5e7;
                      border-radius: 8px;
                      box-shadow: 0 0 30px rgba(0, 0, 0, .1);
                      max-height: 500px;
                      min-width: 142px;
                      overflow-y: auto;
                      padding: 12px 0;

                      .bili-cascader-options__item {
                        box-sizing: border-box;
                        color: #61666d;
                        cursor: pointer;
                        display: flex;
                        flex-direction: column;
                        font-size: 13px;
                        justify-content: center;
                        letter-spacing: 0;
                        line-height: 18px;
                        min-height: 40px;
                        padding: 8px 27px;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        user-select: none;
                        white-space: nowrap;

                        .bili-cascader-options__item-custom {
                          align-items: center;
                          display: flex;
                          flex-wrap: nowrap;
                        }
                      }

                      .bili-cascader-options__item:not(.is-disabled):hover {
                        background-color: #9499a01a;
                      }
                    }
                  }
                }
              }

              .bili-dyn-more__btn.tp {
                color: #c9ccd0;
                height: 24px;
                right: -4px;
                top: -3px;
                width: 24px;
              }

              .bili-dyn-more__btn.tp svg {
                height: 24px;
                pointer-events: none;
                width: 24px;
              }
            }
          }
        }

        .bili-dyn-item__body {
          margin-top: 8px;

          .bili-dyn-content {
            -webkit-font-smoothing: antialiased;
            font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
            font-weight: 400;

            .bili-dyn-content__orig__additional,
            .bili-dyn-content__orig__major.gap,
            .bili-dyn-content__orig__major.suit-video-card {
              margin-top: 12px;
            }

            .dyn-card-opus {
              margin-top: -6px;

              .dyn-card-opus__summary {
                cursor: pointer;

                .bili-rich-text {
                  -webkit-font-smoothing: antialiased;
                  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
                  font-weight: 400;
                  white-space: pre-wrap;
                  word-break: break-word;

                  .bili-rich-text__content {
                    color: #18191c;

                    .multiline_text {
                      white-space: pre-wrap;
                      /* 保留换行符并自动换行 */
                    }
                  }

                  .bili-rich-text__content.folded {
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }

                  .bili-rich-text__content.line--6 {
                    -webkit-line-clamp: 6;
                  }

                  .bili-rich-text__action {
                    color: #008ac5;
                    cursor: pointer;
                    display: inline-block;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    user-select: none;
                  }
                }
              }

              .dyn-card-opus__pics {
                margin-top: 12px;

                .bili-album__preview.grid3 {
                  display: grid;
                  grid-gap: 4px;
                  gap: 4px;
                  grid-template-columns: repeat(3, 1fr);
                  width: 404px;
                  /* 
                  .bili-album__preview__picture {
                    position: relative;
                  }

                  .bili-album__preview__picture {
                    background-color: #fff;
                    border-radius: 6px;
                    overflow: hidden;

                    .bili-album__preview__picture__img {
                      border-radius: 6px;
                      cursor: zoom-in;
                      height: 100%;
                      width: 100%;
                    }

                    .b-img {
                      background-color: #f1f2f3;
                      position: relative;
                      height: 100%;
                    }
                  } */

                  .bili-album__preview__picture {
                    height: 132px;
                    width: 132px;
                    background-color: #fff;
                    border-radius: 6px;
                    overflow: hidden;
                    position: relative;

                    :deep(.el-image) {
                      width: 100%;
                      height: 100%;
                    }

                    &.total-mask:after {
                      align-items: center;
                      background-color: rgba(0, 0, 0, .3);
                      border-radius: 4px;
                      color: #fff;
                      content: attr(data-total);
                      display: flex;
                      font-size: 16px;
                      height: 100%;
                      justify-content: center;
                      left: 0;
                      pointer-events: none;
                      position: absolute;
                      top: 0;
                      width: 100%;
                    }
                  }
                }




              }
            }
          }


        }

        .bili-dyn-item__footer {
          display: flex;
          height: 50px;
          // justify-content: space-between;
          padding-right: 20px;

          .bili-dyn-item__action {
            position: relative;

            .bili-dyn-action {
              align-items: center;
              color: #61666d;
              cursor: pointer;
              display: flex;
              font-size: 13px;
              height: 100%;
              position: relative;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
              width: 104px;

              svg {
                height: 18px;
                margin-right: 4px;
                pointer-events: none;
                width: 18px;
              }
            }

            .bili-dyn-action:not(.disabled).active,
            .bili-dyn-action:not(.disabled):hover {
              color: #00aeec;
            }
          }
        }



      }
    }
  }
}


main {
  width: 560px;
  margin: 0 auto;
  // background-color: pink;
}

main section {
  width: 100%;
  margin-bottom: 8px;
}



.bili-dyn-home--member {
  padding-top: 8px;
  position: relative;


  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  min-height: 150vh;
  position: relative;
}

@media screen and (max-width: 1042px) {
  .bili-dyn-home--member {
    justify-content: flex-start;
    padding-left: 12px;
  }
}

@media screen and (min-width: 1140px) {
  main {
    width: 560px;
  }
}

@media screen and (min-width: 1320px) {
  main {
    width: 724px;
  }
}

.bgc {
  top: 0;
  height: 100vh;
  background-color: #d3e9e8;
}

.bg,
.bgc {
  pointer-events: none;
  z-index: 0;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background-image: url('../assets/momentBg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg {
  bottom: 0;
  height: 56.25vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  transition: .3s;
}
</style>
<style lang="scss">
/* 调整预览图片大小（保持比例） */
.el-image-viewer__img {
  width: 50% !important;
  /* 按需调整百分比 */
  height: auto !important;
}
</style>